<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, initial-scale=1.0, width=device-width" />
    <meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
    <link rel="stylesheet" type="text/css" href="../../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../../css/main.css" />
    <style type="text/css">
        body {
            background: rgba(190,190,190, 0.3);
        }
        .big-box {
            background: #fff;
            border-radius: 20px;
            width: 223px;
            height: 235px;
            position: absolute;
            left: 50%;
            top: 42%;
            transform: translate(-50%, -50%);
            padding-top: 15px;
            z-index: 99999;
        }
    </style>
</head>

<body>
    <div class="big-box" id="vm" v-cloak>
      <div style="text-align:center;color:#8F8F8F;font-size:16px">学分兑换</div>
      <div style="font-size:13px;padding-left:30px;padding-top:13px">学分：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span>{{videoxuefen}}</span></div>
      <div style="font-size:13px;padding-left:30px;padding-top:12px">我的学分：&nbsp;<span>{{score}}</span></div>
      <div style="font-size:13px;padding-left:30px;padding-top:12px">观看有效期至{{showriqi(riqi)}}</div>
      <div style="font-size:13px;padding-left:30px;padding-top:13px;padding-bottom:12px;">官方有权调整影片内容</div>
      <div style="font-size:13px;border-top:1px solid #8F8F8F;color:#ED7C4C;text-align:center;height:30px;line-height:30px;" @click="exchange()">兑换</div>
      <div style="font-size:13px;border-top:1px solid #8F8F8F;color:#ED7C4C;text-align:center;height:30px;line-height:30px;"onclick="Opencancel()">取消</div>
    </div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/config.js"></script>
<script type="text/javascript" src="../../script/rest.js"></script>
<script type="text/javascript" src="../../script/vue.2.5.js"></script>
<script type="text/javascript" src="../../script/faskclick.js"></script>
<script type="text/javascript">
var uid= $api.getStorage('uid');
var session= $api.getStorage('session');
var vm = new Vue({
    el: '#vm',
    data: {
      score:'0',
      videoxuefen:'',
      riqi:''
    },
    created: function() {
        var _this = this;

        apiready = function() {
            _this.init();
            api.parseTapmode();
            if ('addEventListener' in document) {
                document.addEventListener('DOMContentLoaded', function() {
                    FastClick.attach(document.body);
                }, false);
            }

        }
    },
    methods: {
        init: function() {
            var _this = this;
            _this.videoxuefen=api.pageParam.videoxuefen;
            _this.riqi=api.pageParam.riqi.split(' ')[0];
            if(uid){
              // 获取个人信息
              _this.getuserinfo();
            }

        },
        showriqi(riqi){
          if(api.pageParam.isyongjiu==1){
            return '永久'
          }else{
            return riqi
          }

        },
        exchange(){
          // 兑换
          var _this = this;
          if(uid){
            new rest().get('payVideoScore').datae({
                _uid: uid,
                session:session,
                video_id:api.pageParam.videoid
            }).success(function(res) {
              console.log('--------------------------------------------------------');
              // alert(JSON.stringify(res))
                if (res.flag == 1) {
                  if (api.pageParam.value==1) {
                    api.sendEvent({
                        name: 'playvideoad'
                    });
                  }else {
                    api.sendEvent({
                        name: 'bofang'
                    });
                  }
                  api.sendEvent({
                      name: 'duihuansuccess',
                  });

                } else {
                    api.toast({
                        msg: res.msg,
                        duration: 2000,
                        location: 'middle'
                    });

                }
                console.log(JSON.stringify(res))

            }).error(function(err) {
                console.log(JSON.stringify(err))
            }).run()
          }else{
            api.openFrame({
                name: 'login_introduction',
                url: '../myself/login_introduction.html',
                rect: {
                    x: 0,
                    y: 0,
                    w: 'auto',
                    h: 'auto'
                },
                pageParam: {
                    value:api.pageParam.value
                },
                bounces: false,
                bgColor: 'rgba(0,0,0,0.7)',
                vScrollBarEnabled: true,
                hScrollBarEnabled: true
            });
          }
          setTimeout(function() {
            api.closeFrame();
          }, 1000)


        },
        getuserinfo(){
          var _this = this;
          new rest().get('getUserInfo').datae({
              uid: uid
          }).success(function(res) {
              if (res.flag == 1) {
                  // 学分
                  _this.score=res.msg[0].score;
              } else {
                  api.toast({
                      msg: res.msg[0],
                      duration: 2000,
                      location: 'middle'
                  });
              }
          }).error(function(err) {
              console.log(JSON.stringify(err))
          }).run()
        },
    }
})
    function Opencancel() {
      if (api.pageParam.value==1) {
        api.sendEvent({
            name: 'playvideoad'
        });
      }else {
        api.sendEvent({
            name: 'bofang'
        });
      }
      api.closeFrame();
    }
    // function xuefendh() {
    //   api.openFrame({
    //     name: 'duihuancg',
    //     url: './duihuancg.html',
    //       rect: {
    //           x: 0,
    //           y: 0,
    //           w: 'auto',
    //           h: 'auto'
    //       },
    //       bounces: false,
    //       bgColor: 'rgba(0,0,0,0)',
    //       vScrollBarEnabled: true,
    //       hScrollBarEnabled: true
    //   });
    //   api.closeFrame({
    //
    //   });
    //
    // }
</script>

</html>
